<template>
  <div class="header-com">
    <el-row>
      <el-col :span="100" style="height: 60px">
        <img src="../assets/bannerHeader.png" alt="" class="img">
      </el-col>
      <el-col :span="4" :offset="10" class="user-info">
        欢迎,<span class="user-name">{{userInfo.userName}}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'HeaderCom',
    computed:{
      ...mapGetters(["userInfo"])
    }
  }
</script>

<style scoped>
  .img {
    width: 380px;
    height: 100%;
    max-height: 100%;
  }
  .user-info {
    text-align: right;
    line-height: 60px;
  }
  .user-name {
    padding-left: 5px;
    color: red;
    font-weight: bold;
  }
</style>
